<template>
	<view class="video-player-page">
		<!-- 1. 视频播放器 -->
		<view class="video-wrapper" @click="toggleControls">
			<DomVideoPlayer
				v-if="videoData.src"
				class="fullscreen-video"
				:src="videoData.src"
				:autoplay="true"
				:loop="true"
				:controls="false"
				:muted="false"
				object-fit="contain"
				style="width: 100%; height: 100%;"
			/>
		</view>

		<!-- 2. 顶部自定义导航栏 (可隐藏) -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }" v-show="showControls">
			<u-icon name="arrow-left" color="#fff" size="22" @click="goBack"></u-icon>
		</view>

		<!-- 3. 底部信息区域 (可隐藏) -->
		<view class="bottom-info-container" v-show="showControls">
			<view class="author-info">
				<text class="author-name">@{{ videoData.author.name }}</text>
			</view>
			<view class="video-title">
				{{ videoData.title }}
			</view>
		</view>
		
		<!-- 4. 右侧固定操作栏 (始终显示) -->
		<view class="right-action-bar">
			<!-- 头像 -->
			<view class="action-item avatar-wrapper">
				<u-avatar :src="videoData.author.avatar" size="50"></u-avatar>
				<view class="add-icon">
					<u-icon name="plus" color="#fff" size="12"></u-icon>
				</view>
			</view>
			<!-- 点赞 -->
			<view class="action-item" @click="handleLike">
				<u-icon :name="postStats.isLiked ? 'heart-fill' : 'heart'" :color="postStats.isLiked ? '#ff0055' : '#fff'" size="35"></u-icon>
				<text class="action-text">{{ postStats.likeCount | formatCount }}</text>
			</view>
			<!-- 评论 -->
			<view class="action-item" @click="handleComment">
				<u-icon name="chat" color="#fff" size="35"></u-icon>
				<text class="action-text">{{ postStats.commentCount | formatCount }}</text>
			</view>
			<!-- 收藏 -->
			<view class="action-item" @click="handleFavorite">
				<u-icon :name="postStats.isFavorited ? 'star-fill' : 'star'" :color="postStats.isFavorited ? '#ffaa00' : '#fff'" size="35"></u-icon>
				<text class="action-text">{{ postStats.favoriteCount | formatCount }}</text>
			</view>
			<!-- 分享 -->
			<view class="action-item" @click="handleShare">
				<u-icon name="share" color="#fff" size="35"></u-icon>
				<text class="action-text">{{ postStats.shareCount | formatCount }}</text>
			</view>
			<!-- 列表/地点 -->
			<view class="action-item" @click="openListPopup">
				<u-icon name="list" color="#fff" size="35"></u-icon>
			</view>
		</view>
		
		<!-- 5. 地点信息弹窗 (已按新图纸更新) -->
		<u-popup :show="showLocationPopup" @close="showLocationPopup = false" mode="bottom" round="10">
			<view class="location-popup">
				<view class="popup-header">
					<u-icon name="close" size="18" @click="showLocationPopup = false"></u-icon>
					<text class="popup-title">提及地点 (1)</text>
					<view style="width: 18px;"></view> <!-- 占位符，使标题居中 -->
				</view>
				
				<view class="location-group">
					<view class="city-row">
						<text>{{ locationInfo.city }}</text>
						<u-icon name="arrow-right" color="#999" size="14"></u-icon>
					</view>

					<view class="location-card">
						<view class="location-image-wrapper">
							<image class="location-image" :src="locationInfo.image" mode="aspectFill"></image>
							<view class="scenic-spot-tag">景点</view>
						</view>
						<view class="location-info">
							<view class="line-one">
								<text class="location-name">{{ locationInfo.name }}</text>
								<text class="level-tag">{{ locationInfo.level }}</text>
								<u-icon name="thumb-up-fill" color="#ff5500" size="14"></u-icon>
								<text class="hotness">{{ locationInfo.hotness }}</text>
								<view class="favorite-icon" @click="toggleLocationFavorite">
									<u-icon :name="locationInfo.isFavorited ? 'heart-fill' : 'heart'" :color="locationInfo.isFavorited ? '#ff5500' : '#666'" size="20"></u-icon>
								</view>
							</view>
							<view class="line-two">
								<text>{{ locationInfo.rank }}</text>
							</view>
							<view class="line-three">
								<text class="rating-value">{{ locationInfo.rating }}/5</text>
								<text class="reviews-count">{{ locationInfo.totalReviews }}条点评</text>
							</view>
							<view class="line-four">
								<text class="feature-tag">{{ locationInfo.featureTag }}</text>
							</view>
							<view class="line-five">
								<text>{{ locationInfo.address }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
// 引入 DomVideoPlayer 组件
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue';

export default {
	components: {
		DomVideoPlayer
	},
	data() {
		return {
			videoData: {
				src: '',
				title: '加载中...',
				author: {
					name: '...',
					avatar: ''
				}
			},
			statusBarHeight: 0,
			showControls: true, 
			controlTimeout: null,
			postStats: {
				isLiked: false,
				likeCount: 285,
				commentCount: 296,
				isFavorited: true,
				favoriteCount: 29,
				shareCount: 15
			},
			// 地点弹窗控制及更新后的模拟数据
			showLocationPopup: false,
			locationInfo: {
				city: '淮安',
				name: '龙宫大白鲸',
				level: '5A',
				hotness: 6.6,
				isFavorited: true,
				rank: '口碑榜 · 淮安玩水避暑榜 No.2',
				rating: 4.5,
				totalReviews: 2635,
				featureTag: '白天湖畔散步夜晚乘船赏景',
				address: '工业园区金鸡湖西/苏州中心',
				image: 'https://picsum.photos/seed/jinji-lake/200/150'
			}
		};
	},
	filters: {
		formatCount(val) {
			if (typeof val !== 'number') return val;
			if (val >= 1000) return (val / 1000).toFixed(1) + 'k';
			return val;
		}
	},
	onLoad(options) {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		if (options.data) {
			try {
				this.videoData = JSON.parse(decodeURIComponent(options.data));
			} catch (e) {
				console.error("解析视频数据失败:", e);
				uni.showToast({ title: '视频加载失败', icon: 'none' });
				setTimeout(() => uni.navigateBack(), 1500);
			}
		} else {
			uni.showToast({ title: '视频地址无效', icon: 'none' });
			setTimeout(() => uni.navigateBack(), 1500);
		}
		
		this.startControlTimeout();
	},
	onUnload() {
		if(this.controlTimeout) {
			clearTimeout(this.controlTimeout);
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		toggleControls() {
			this.showControls = !this.showControls;
			if (this.showControls) {
				this.startControlTimeout();
			} else {
				if(this.controlTimeout) {
					clearTimeout(this.controlTimeout);
				}
			}
		},
		startControlTimeout() {
			if(this.controlTimeout) {
				clearTimeout(this.controlTimeout);
			}
			this.controlTimeout = setTimeout(() => {
				this.showControls = false;
			}, 3000); 
		},
		handleLike() {
			this.postStats.isLiked = !this.postStats.isLiked;
			this.postStats.likeCount += this.postStats.isLiked ? 1 : -1;
		},
		handleComment() {
			uni.showToast({ title: '评论功能待实现', icon: 'none' });
		},
		handleFavorite() {
			this.postStats.isFavorited = !this.postStats.isFavorited;
			this.postStats.favoriteCount += this.postStats.isFavorited ? 1 : -1;
		},
		handleShare() {
			uni.showToast({ title: '分享功能待实现', icon: 'none' });
		},
		openListPopup() {
			this.showLocationPopup = true;
		},
		// 新增：地点收藏切换
		toggleLocationFavorite() {
			this.locationInfo.isFavorited = !this.locationInfo.isFavorited;
		}
	}
};
</script>

<style lang="scss" scoped>
.video-player-page {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	position: relative;
	overflow: hidden;
}

.video-wrapper {
	width: 100%;
	height: 100%;
}

.fullscreen-video {
	width: 100%;
	height: 100%;
}

.custom-navbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
	transition: opacity 0.3s ease;
}

.bottom-info-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 120rpx; 
	z-index: 10;
	padding: 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	color: #fff;
	transition: opacity 0.3s ease;

	.author-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.author-name {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.video-title {
		font-size: 28rpx;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

.right-action-bar {
	position: absolute;
	bottom: calc(200rpx + env(safe-area-inset-bottom));
	right: 20rpx;
	z-index: 11;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.avatar-wrapper {
		position: relative;
		margin-bottom: 60rpx;
		
		.add-icon {
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 36rpx;
			height: 36rpx;
			background-color: #ff0055;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.action-text {
		font-size: 24rpx;
		margin-top: 8rpx;
		font-weight: 500;
	}
}

/* --- 全新地点弹窗样式 --- */
.location-popup {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 24rpx 30rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		
		.popup-title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.location-group {
		.city-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #333;
			// border-bottom: 1rpx solid #f0f0f0;
		}
		
		.location-card {
			display: flex;
			padding: 24rpx;
			background-color: #F6FAFB;
			border-radius: 12rpx;
			
			.location-image-wrapper {
				position: relative;
				width: 180rpx;
				height: 230rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				.location-image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.scenic-spot-tag {
					position: absolute;
					top: 8rpx;
					left: 8rpx;
					background-color: rgba(0,0,0,0.5);
					color: #fff;
					font-size: 20rpx;
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
				}
			}
			
			.location-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 4rpx; // 行间距
				min-width: 0; // 防止flex item内容撑开

				.line-one {
					display: flex;
					align-items: center;
					gap: 12rpx;
					
					.location-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #000;
					}
					.level-tag {
						background-color: #EBF4FF;
						color: #1A4A88;
						font-size: 20rpx;
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
						font-weight: bold;
					}
					.hotness {
						color: #ff5500;
						font-size: 24rpx;
					}
					.favorite-icon {
						margin-left: auto;
					}
				}
				
				.line-two {
					font-size: 24rpx;
					color: #5F3417;
					line-height: 50rpx;
				}
				
				.line-three {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					.rating-value {
						color: #FA6400;
						font-weight: bold;
					}
					.reviews-count {
						color: #515556;
					}
				}
				
				.line-four {
					.feature-tag {
						display: inline-block;
						background-color: #F5F8FD;
						border: 1rpx solid #C2C4D1;
						color: #1A4A88;
						font-size: 22rpx;
						border-radius: 5rpx;
						padding: 4rpx 10rpx;
						border-radius: 4rpx;
					}
				}

				.line-five {
					font-size: 24rpx;
					color: #515556;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height:50rpx;
				}
			}
		}
	}
}
</style>